import cssRender from 'css-render';

import { MaskCreateProps, DialogStyleProps } from '../types';
const { c } = cssRender();

export const createMaskStyle = (props: MaskCreateProps, cssVars: Record<string, string | number>, cssId: string) => {
  const style = c(
    `.${props.classPrefix}-tour-mask`,
    () => ({
      position: 'fixed',
      inset: '0',
      pointerEvents: 'none',
      zIndex: props.zIndex,
      transition: 'all 377ms cubic-bezier(0.4, 0, 0.2, 1)',
    }),
    [
      c(`&.css-vars-${cssId}`, () => cssVars),
      c(`.${props.classPrefix}-tour-mask-svg`, {
        width: '100%',
        height: '100%',
      }),

      c(`.${props.classPrefix}-tour-mask--placeholder`, {
        transition: 'all 377ms cubic-bezier(0.4, 0, 0.2, 1)',
      }),

      c(`.${props.classPrefix}-tour-mask--background`, {
        transition: 'all 377ms cubic-bezier(0.4, 0, 0.2, 1)',
      }),
    ]
  );
  return { mount: style.mount.bind(style), unMount: style.unmount.bind(style) };
};

export const createDialogStyle = (props: DialogStyleProps, cssVars: Record<string, string | number>, cssId: string) => {
  const style = c(
    `.${props.classPrefix}-tour-dialog`,
    () => ({
      position: 'absolute',
      zIndex: props.zIndex,
      boxSizing: 'border-box',
      backgroundColor: '#fff',
      borderRadius: '4px',
      transition: 'all 377ms cubic-bezier(0.4, 0, 0.2, 1)',
      color: 'rgba(0, 0, 0, 0.85)',
      boxShadow: '0 3px 6px -4px rgba(0, 0, 0, .12), 0 6px 16px 0 rgba(0, 0, 0, .08), 0 9px 28px 8px rgba(0, 0, 0, .05)',
    }),
    [
      c(`&.css-vars-${cssId}`, () => cssVars),
      c(
        `& .${props.classPrefix}-tour-content`,
        () => ({
          position: 'relative',
        }),
        [
          c(
            `& .${props.classPrefix}-tour-arrow`,
            {
              position: 'absolute',
              display: 'block',
              pointerEvents: 'none',
              width: '12px',
              height: '12px',
            },
            [
              c(`&:before`, {
                position: 'absolute',
                bottom: '0',
                insetInlineStart: '0',
                zIndex: '1',
                width: 'calc(6px * 1.414)',
                height: 'calc(6px * 1.414)',
                background: '#FFF',
                content: "''",
                transform: 'rotate(45deg)',
              }),
            ]
          ),
          c(
            `& .${props.classPrefix}-tour-inner`,
            {
              display: 'flex',
              flexDirection: 'column',
              minWidth: '400px',
              boxSizing: 'border-box',
              lineHeight: '1.6',
            },
            [
              //  close icon
              c(
                `& .${props.classPrefix}-tour-close`,
                {
                  cursor: 'pointer',
                  position: 'absolute',
                  top: '16px',
                  right: '16px',
                  outline: 'none',
                  width: '1.6',
                  height: '22px',
                  transition: 'background-color 377ms cubic-bezier(0.4, 0, 0.2, 1)',
                  display: 'flex',
                  justifyContent: 'center',
                  alignItems: 'center',
                  borderRadius: '4px',
                },
                [
                  c(`&:hover`, {
                    backgroundColor: 'rgba(0, 0, 0, 0.06)',
                  }),
                ]
              ),
              c(
                `.${props.classPrefix}-tour-header`,
                {
                  padding: '16px 16px 8px',
                },
                [
                  c(`.${props.classPrefix}-tour-title`, {
                    fontSize: '14px',
                    fontWeight: '600',
                  }),
                ]
              ),
              c(`.${props.classPrefix}-tour-message`, {
                padding: '0px 16px 0',
              }),
              c(
                `.${props.classPrefix}-tour-footer`,
                {
                  padding: '16px 16px 16px',
                  display: 'flex',
                  flexDirection: 'row',
                  justifyContent: 'space-between',
                  alignItems: 'center',
                },
                [
                  c(
                    `.tour-prev-button`,
                    {
                      margin: '0',
                      lineHeight: '1',
                      whiteSpace: 'nowrap',
                      cursor: 'pointer',
                      backgroundColor: '#fff',
                      height: '30px',
                      outline: 'none',
                      border: '1px solid rgb(224, 224, 230)',
                      borderRadius: '4px',
                      fontSize: 'var(--tour-border)',
                      padding: '8px 12px',
                      transition: 'border 377ms cubic-bezier(0.4, 0, 0.2, 1)',
                    },
                    [
                      c(`&:hover`, {
                        borderColor: '#2080f0',
                      }),
                    ]
                  ),
                  c(`.tour-next-button`, {
                    margin: '0 0 0 10px',
                    lineHeight: '1',
                    whiteSpace: 'nowrap',
                    cursor: 'pointer',
                    backgroundColor: '#2080f0',
                    height: '30px',
                    outline: 'none',
                    border: '1px solid #2080f0',
                    borderRadius: '4px',
                    color: '#fff',
                    padding: '8px 12px',
                  }),
                  c(
                    `.tour-finish-button`,
                    {
                      margin: '0 0 0 10px',
                      lineHeight: '1',
                      whiteSpace: 'nowrap',
                      cursor: 'pointer',
                      backgroundColor: '#fff',
                      height: '30px',
                      outline: 'none',
                      border: '1px solid rgb(224, 224, 230)',
                      borderRadius: '4px',
                      fontSize: 'var(--tour-border)',
                      transition: 'border 377ms cubic-bezier(0.4, 0, 0.2, 1)',
                      padding: '8px 12px',
                    },
                    [
                      c(`&:hover`, {
                        borderColor: '#2080f0',
                      }),
                    ]
                  ),
                ]
              ),
            ]
          ),
        ]
      ),
    ]
  );
  return { mount: style.mount.bind(style), unMount: style.unmount.bind(style) };
};

export const createTourDotsStyle = () => {
  const style = c(
    `.tour-dots`,
    {
      display: 'flex',
      flexDirection: 'row',
      gap: '6px',
    },
    [
      c(
        `.tour-dots__dot`,
        {
          width: '8px',
          height: '8px',
          borderRadius: '8px',
          backgroundColor: 'rgba(0,0,0,0.2)',
          cursor: 'default',
          transition: 'background-color var(--tour-dot-duration) var(--tour-dot-bezier)',
        },
        [
          c(`&.is-active`, {
            backgroundColor: 'var(--tour-dot-primary-color)',
          }),
        ]
      ),
    ]
  );
  return { mount: style.mount.bind(style), unMount: style.unmount.bind(style) };
};
